<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>计数器：{{count}}</h1>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    命令式编程：
    <h1>计数器：0</h1>
    <button class="add">+</button>
    <button class="sub">-</button>
    --------------------------------------------------------------------------------------------------------
    const h=document.querySelector("h1");
    const add=document.querySelector(".add")
    const sub=document.querySelector(".sub")
    let count=0
    add.addEventListener('click',()=>{
      count++
      h.textContent=`计数器：${count}`
    })
    sub.addEventListener('click',()=>{
      count--
      h.textContent=`计数器：${count}`
    })
    */

    // 声明式编程：
    const app = Vue.createApp({
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            add: function () {
                console.log(this)
                this.count++
            },
            sub: function () {
                console.log(this)
                this.count--
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>
